<template>
  <div class="blog-article-page">
    <el-card shadow="hover" class="article-main-card">
      <header class="blog-article-header">
        <h1 class="blog-article-title">
          <el-icon style="vertical-align: middle; color: #42b983; margin-right: 8px;">
            <Document />
          </el-icon>
          {{ article.title }}
        </h1>
        <div class="blog-article-meta">
          <el-tag type="success" effect="plain" class="meta-tag">
            分类：{{ article.categoryName }}
          </el-tag>
          <el-tag type="info" effect="plain" class="meta-tag">
            创建时间：{{ article.createTime }}
          </el-tag>
          <el-tag type="warning" effect="plain" class="meta-tag">
            更新时间：{{ article.updateTime }}
          </el-tag>
        </div>
      </header>
      <el-alert v-if="article.summary" :title="article.summary" type="info" show-icon class="blog-article-summary"
        effect="light" />
      <el-divider content-position="left">
        <el-icon>
          <StarFilled />
        </el-icon>
        正文内容
      </el-divider>
      <!-- 正文内容美化包装，支持markdown渲染 -->
      <el-card class="blog-content-card" shadow="never" body-style="padding: 28px 18px 18px 18px;">
        <div class="markdown-body" v-html="renderedContent"></div>
      </el-card>

      <el-divider>
        <el-icon>
          <MagicStick />
        </el-icon>
      </el-divider>
      <footer class="blog-article-footer">

        <!-- 心灵鸡汤 -->
        <el-alert :title="randomPoem" type="success" show-icon class="random-poem" effect="dark" />

        <!-- 审核操作区域（放在返回按钮和心灵鸡汤之间） -->
        <div v-if="article.status === 0 || article.status === 3" class="audit-section" style="max-width: 600px; margin: 24px auto 18px auto;">
          <el-form :inline="true" label-width="80px">
            <el-form-item label="审核结果">
              <el-radio-group v-model="auditStatus">
                <el-radio label="通过">通过</el-radio>
                <el-radio label="不通过">不通过</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="审核意见">
              <el-input v-model="auditComment" type="textarea" placeholder="请输入审核意见" :rows="2" style="width: 320px" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitAudit">提交审核</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- 返回按钮 -->
        <el-button class="back-button" type="primary" @click="goBack" round icon="ArrowLeft">
          返回
        </el-button>

      </footer>
    </el-card>
    <comment :id="Number(articleId)" />
  </div>
</template>

<script setup>
import comment from '@/views/comment/Comment.vue';
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { articleDetailService } from '@/api/article';
import { Document, StarFilled, MagicStick, ArrowLeft } from '@element-plus/icons-vue';
import MarkdownIt from 'markdown-it';
import hljs from 'highlight.js';
import 'highlight.js/styles/github.css';
import { ElMessage } from 'element-plus';

const md = new MarkdownIt({
  html: true,
  linkify: true,
  typographer: true,
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return '<pre class="hljs"><code>' +
          hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
          '</code></pre>';
      } catch (__) { }
    }
    return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
  }
});

const route = useRoute();
const randomPoem = ref('');
const article = ref({
  title: '',
  categoryName: '',
  summary: '',
  content: '',
  createTime: '',
  updateTime: ''
});
const renderedContent = ref('');
const poems = [
  "每一次的努力都是一种收获，只有不断努力，才能最终实现自己的梦想",
  "不要让你的过去决定你的未来，每一天都是一个新的开始",
  "勇往直前：不要因为恐惧而止步，要勇往直前，勇敢面对挑战，勇于追求自己的梦想",
  "无论遇到什么困难，都要坚信自己的能力，勇往直前，不断超越自己",
  "人生的路途上，只有不断地前行，才能看到更美好的风景",
  "无论你遭遇多大的困难和坎坷，都应该坚持走下去",
  "没有什么比自信更重要的了，因为自信是成功的关键",
  "真正的成功不是看你有多少钱，而是看你有多少勇气去追寻自己的梦想",
  "人生的路途上，只有不断地学习和成长，才能更好地实现自己的价值",
  "人生就像是一场马拉松比赛，持之以恒才能突破自我",
  "路虽远行则将至，事虽难做则必成，与你共勉，共同进步",
  "岂能因为一次失败就放弃对美好生活的追求",
  "不经一事，不长一智",
  "勇敢担当：不要害怕承担责任，要敢于担当，让自己的能力得到最大的发挥，不断提升自己的价值",
];
const articleId = route.params.id;
const getArticle = async () => {
  let result = await articleDetailService(articleId);
  // console.log(result);
  article.value = result.data;
  article.value.categoryName = decodeURIComponent(route.query.categoryName);
  // 用 markdown-it 渲染正文内容
  renderedContent.value = md.render(article.value.content || '');
  const index = Math.floor(Math.random() * poems.length);
  randomPoem.value = poems[index];
}
getArticle();

const goBack = () => {
  window.history.go(-1);
}
import router from '@/router/index.js'
import { remarkAddService } from '@/api/remark.js';
import { articleUpdateService } from '@/api/article.js';
// 审核相关
const auditStatus = ref('');
const auditComment = ref('');
const submitAudit = async () => {
  if (!auditStatus.value || !auditComment.value) {
    ElMessage.warning('请选择审核结果和意见');
    return;
  }
  try {
    const type = auditStatus.value === '通过' ? 0 : 1;
    const result = await remarkAddService({
      articleId: Number(articleId),
      type: type,
      content: auditComment.value
    });
    // TODO
    if (type === 0) {
      await articleUpdateService({
        ...article.value,
        status: 2 // 设置为审核通过状态
      })
    } else {
      await articleUpdateService({
        ...article.value,
        status: 3 // 设置为审核不通过状态
      });
    }
    ElMessage.success('审核提交成功');
    router.push("/article/manage")
  } catch (error) {
    ElMessage.error('审核提交失败，请稍后重试');
  }
};
</script>

<style scoped>
@import "https://cdn.jsdelivr.net/npm/github-markdown-css@5.5.1/github-markdown-light.min.css";

.blog-article-page {
  max-width: 900px;
  margin: 40px auto 30px auto;
  padding: 0 10px;
  background: #f5f7fa;
  min-height: 100vh;
}

.article-main-card {
  border-radius: 14px;
  box-shadow: 0 6px 24px 0 rgba(66, 185, 131, 0.08), 0 1.5px 4px 0 rgba(0, 0, 0, 0.04);
  padding: 32px 28px 18px 28px;
  background: #fff;
}

.blog-article-header {
  margin-bottom: 18px;
}

.blog-article-title {
  font-size: 2.2em;
  color: #222;
  font-weight: bold;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.blog-article-meta {
  margin-top: 10px;
  margin-bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.meta-tag {
  font-size: 0.98em;
}

.blog-article-summary {
  margin: 18px 0 18px 0;
  border-radius: 6px;
  font-size: 1.08em;
}

.blog-content-card {
  margin: 0 0 18px 0;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e6e8eb;
  box-shadow: 0 2px 8px 0 rgba(66, 185, 131, 0.06);
}

.markdown-body {
  font-size: 1.13em;
  line-height: 1.8;
  color: #333;
  min-height: 180px;
  word-break: break-word;
  background: none;
  border: none;
  padding: 0;
}

.markdown-body p {
  margin-bottom: 1.5em;
}

.markdown-body img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 1em 0;
  box-shadow: 0 2px 8px rgba(66, 185, 131, 0.08);
}

.markdown-body pre,
.markdown-body code {
  font-family: 'Fira Mono', 'Consolas', 'Menlo', 'Monaco', 'monospace';
  background: #f6f8fa;
  color: #2d3a4b;
  border-radius: 6px;
  padding: 0.2em 0.6em;
  font-size: 0.98em;
}

.markdown-body pre {
  background: #f6f8fa;
  padding: 1em;
  margin: 1.2em 0;
  overflow-x: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(66, 185, 131, 0.08);
}

.markdown-body code {
  background: #f3f4f6;
  color: #d6336c;
  padding: 0.2em 0.4em;
  border-radius: 4px;
}

.blog-article-footer {
  margin-top: 30px;
  text-align: center;
}

.random-poem {
  margin: 0 auto 18px auto;
  border-radius: 8px;
  font-size: 1.08em;
  max-width: 90%;
}

.back-button {
  margin-top: 8px;
  background-color: #42b983;
  color: #fff;
  border: none;
  padding: 10px 28px;
  border-radius: 22px;
  cursor: pointer;
  font-size: 1.08em;
  transition: background 0.2s;
}

.back-button:hover {
  background-color: #369f7e;
  color: #fff;
}

.audit-section {
  margin: 24px 0 24px 0;
  padding: 18px 18px 0 18px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e6e8eb;
}
</style>
